<template>
  <div class="category">
      <div class="search" @click="tosearch">
          <div class="search-content">
              <span class="search-icon"></span>
              <span>商品搜索，共239款好物</span>
          </div>
      </div>
      <div class="category-main">
          <scroll-view class="main-left" scroll-y="true">
              <div class="left-title"
                v-for="(item,index) in listData" :key="index"
                :class="[index === nowIndex ? 'active' : '']"
                @click="selectItem(item.id, index)">
                {{item.name}}
              </div>
          </scroll-view>
          <scroll-view class="main-right" scroll-y="true">
              <div class="banner">
                  <img :src="detailData.banner_url" />
              </div>
              <div class="right-title">
                  <span>-</span>
                  <span>{{detailData.name}}分类</span>
                  <span>-</span>
              </div>
              <div class="right-content">
                  <div class="content-item"
                   v-for="(item,index) in detailData.subList" :key="index"
                   @click="categoryList(item.id)">
                      <img :src="item.wap_banner_url" />
                      <span>{{item.name}}</span>
                  </div>
              </div>
          </scroll-view>
      </div>
  </div>
</template>

<script>
import { get } from '../../utils'
export default {
    data() {
        return {
            listData: [],
            nowIndex: 0,
            id: '1005000',
            detailData: {}
        }
    },
    mounted() {
        this.getlistData()
        this.selectItem(this.id, this.nowIndex)
    },
    methods: {
        tosearch() {
            wx.navigateTo({
                url: '/pages/search/main'
            })
        },
        async getlistData() {
            const data = await get('/category/indexAction')
            // console.log(data)
            this.listData = data.categoryList
        },
        // 获取右边的商品数据
        async selectItem(id, index) {
            this.nowIndex = index
            const data = await get('/category/currentaction', {
                id: id
            })
            // console.log(data)
            this.detailData = data.data.currentOne
        },
        categoryList(id) {
            wx.navigateTo({
                url: '/pages/categoryList/main?id=' + id
            })
        }
    }
}
</script>

<style scoped>
@import './style.css';
</style>